<template>
  <div class="storesInf commonMain">
    <div class="coMain">
      <div>
        <div class="coMainIn">
          <div class="coTitle">门店管理<span class="fcHint">展示门店地址、电话等信息，支持调用微信地图功能为消费者导航到店</span></div>
          <div class="commonForm goodsForm">
            <div class="add">
              <router-link to="/stores/add">
                <button type="button" class="addBtn">添加门店</button>
              </router-link>
              <span class="fcHint">你可以添加最多10个门店</span>
            </div>
            <div class="commonList goodsList">
              <ul class="cmlTitle">
                <li>门店</li>
                <li>创建时间</li>
                <li>操作</li>
              </ul>
              <div class="cmList">
                <div class="cml1" v-for="(item, index) in shopsList">
                  <div class="cmlInfo">
                    <div class="cmlInfo_img" :style="{background: 'url(' + item.image.imgUrl + ') no-repeat', backgroundSize: '100px 100px'}"></div>
                    <div class="cmlInfo_describe">
                      <div class="cmlInfo_name">{{item.name}}</div>
                      <div class="cmInfo_detail">{{item.address}}</div>
                      <div class="cmInfo_detail">{{item.phone}}</div>
                    </div>
                  </div>
                  <div class="cmlTime">
                    {{item.createTime.split(' ')[0]}}<br>{{item.createTime.split(' ')[1]}}
                  </div>
                  <div class="cmlHandle">
                    <div class="cmlHandleBtn">
                      <router-link :to="'/stores/edit/' + item.shopId">
                        <a href="javascript:void(0);">编辑</a>
                      </router-link>
                      <a href="javascript:void(0);" @click="deleteShop(item)">删除</a>
                    </div>
                   <!--  <div class="cmlHandleCue">【示例门店可删除】</div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="javascript/ecmascript6">
import fetch from '@/fetch'

export default{
  name: 'storescomponent',
  data () {
    return {
      shopsList: []
    }
  },
  methods: {
    getShopList () {
      fetch.send('/merchant/getShopsList').then(res => {
        if (res.respCode === '000000') {
          this.shopsList = res.result.shopsList
        } else {
          this.$noty.error(res.respDesc ? res.respDesc : '获取门店列表失败')
        }
      })
    },
    deleteShop (item) {
      if(!confirm('您是否确定删除此门店?')) {
        return
      }
      let params = {
        shopId: item.shopId
      }
      fetch.send('/merchant/deleteShopDetail', params).then(res => {
        if (res.respCode === '000000') {
          this.getShopList()
        } else {
          this.$noty.error(res.respDesc ? res.respDesc : '删除门店失败')
        }
      })
    }
  },
  created () {
    this.getShopList()
  }
}
</script>
<style type="text/css" scoped>
  .commonMain{
    flex: 1 1 0%;
    float: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: auto;
  }
  .coMain{
    height: 100%;
  }
  .coMain>div{
    background: #fff;
    border-right: 1px solid #F2F2F2;
    height: 100%;
    overflow: auto;
  }
  .coMainIn{
    padding: 50px 30px;
  }
  .coTitle{
    color: #333;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding-bottom: 25px;
  }
  .fcHint{
    color: #8f8f8f;
    font-size: 14px;
    vertical-align: bottom;
    margin-left: 5px;
  }
  .addBtn{
    width: 150px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    background: #F54D4F;
    border: none;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 36px;
    margin: 0;
    position: relative;
    outline: none;
    cursor: pointer;
  }
  .commonList{
    width: 640px;
  }
  .cmlTitle{
    display: flex;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #F2F2F2;
    margin: 25px 0;
  }
  .cmlTitle li{
    flex: 1;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #333;
  }
  .cmlTitle li:first-child{
    flex: 3;
  }
  .cmList{
    position: relative;
    width: 100%;
  }
  .cml1{
    display: flex;
    margin-bottom: 25px;
  }
  .cml1>div{
    flex: 1;
    text-align: center;
  }
  .cml1 .cmlInfo{
    flex: 3;
    display: flex;
    text-align: left;
  }
  .cmlInfo_img{
    width: 100px;
    height: 100px;
    background-image: url(./images/goodsImg.png);
  }
  .cmlInfo_describe{
    color: #8f8f8f;
    font-size: 14px;
    line-height: 20px;
    margin-left: 15px;
  }
  .cmlInfo_name{
    color: #333;
    font-size: 16px;
    line-height: 32px;
  }
  .cmlOrder input{
    color: #f54d4f;
    font-size: 14px;
    width: 50px;
    padding: 5px;
  }
  .cmlOrder input:focus{
    border: 1px solid #f54d4f;
    border-radius: 3px;
    color: #333;
    outline: none;
  }
  .cmlTime{
    color: #333;
    font-size: 14px;
    line-height: 22px;
  }
  .cmlHandleBtn a{
    color: #f54d4f;
    font-size: 14px;
    line-height: 22px;
    margin-right: 5px;
  }
  .cmlHandleBtn a:last-child{
    margin: 0;
  }
  .cmlHandleCue{
    font-size: 12px;
    line-height: 16px;
  }
</style>